<%--
  Created by IntelliJ IDEA.
  User: LS
  Date: 2018/5/12
  Time: 11:36
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + request.getContextPath() + "/";
%>
<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<meta name="renderer" content="webkit">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<title>用户注册</title>
		<link rel="stylesheet" href="../../resources/layui/css/layui.css" />
		<link rel="stylesheet" href="../../resources/css/style.css" />
		<script type="text/javascript" src="../../resources/js/jquery-1.11.1.min.js"></script>
		<script type="text/javascript" src="../../resources/layui/layui.js"></script>
		<script type="text/javascript" src="../../resources/js/serilaizeForm.js"></script>
	</head>

	<body>
		<div class="login-main layui-anim layui-anim-up">

			<header class="layui-elip">用户注册</header>
			<form class="layui-form" method="post" id="form1">
				<div class="layui-input-inline">
					<input type="text" name="users.userName" id="userName" required lay-verify="username" placeholder="用户名" class="layui-input">
				</div>
				<div class="layui-input-inline">
					<input type="password" name="users.userPwd" id="user_pwd" required lay-verify="password" placeholder="密码" class="layui-input">
				</div>
				<div class="layui-input-inline">
					<input type="password" id="repeatpassword" lay-verify="repeatpassword" placeholder="重复密码" class="layui-input">
				</div>
				<div class="layui-input-inline">

					<input type="email" name="users.userEmail" id="userEmail" lay-verify="email" placeholder="邮箱地址" class="layui-input">

				</div>
				<div class="layui-input-inline">

					<input type="text" name="users.userPhone" id="userPhone" lay-verify="uephone" placeholder="手机号码" class="layui-input">
				</div>
				<div class=" ">
					<button class="layui-btn" style="width: 45%" lay-submit="" lay-filter="register">注册</button>
					<button type="reset" class="layui-btn layui-btn-danger" style="width: 45%;float: right">重置</button>
				</div>
			</form>
		</div>
		<script>
			/*验证表单*/
			layui.use('form', function() {
						var form = layui.form;
						form.verify({
							username: [
								/^[a-zA-Z_-]{4,16}$/,
								'用户名不合法(4-16位字母开头)..'
							],
							password: [
								/^[\S]{6,18}$/, '密码必须6到18位，且不能出现空格'
							],
							uephone: [
								/^1[1-9]\d{9}$/, '手机号不合法'
							],
							repeatpassword: function(value) {
								var password = $("#user_pwd").val();
								if(value != password) {
									return '两次输入的密码不一致!';
								}
							},
						}); 
						$("#userName").blur(function() {
								$.ajax({
									type: "post",
									url: "/users/verUserName.action?users.userName=" + $("#userName").val(),
									dataType: 'json',
									contentType: 'application/json',
									success: function(data) {
										if(data.result == true) {
											layer.msg("用户名已被使用！！", {
												icon: 2
											});
											$("#userName").val("");
											$("#userName").focus();
										} else {
											layer.msg("用户名可以使用", {
												icon: 1
											});
											form.on('submit(register)', function() {
												var loading = layer.msg('请稍后....', {
													icon: 16,
													shade: 0.01
												});
												var url = '/users/add.action';
												$.ajax({
													type: "POST",
													url: url,
													data: {
														"users.userName": $('#userName').val(),
														"users.userPwd": $('#user_pwd').val(),
														"users.userEmail": $('#userEmail').val(),
														"users.userPhone": $('#userPhone').val()
													},
													dataType: 'json',
													success: function(data) {
														if(data.result == true) {
															layer.msg('注册成功', {
																icon: 1,
																time: 1000,
																end: function() {
																	parent.layer.closeAll();
																	parent.layer.open({
																		type: 2,
																		title: '注册/登陆',
																		shadeClose: true, //点击遮罩关闭层
																		area: ['420px', '400px'],
																		content: '/pages/relogin/login.jsp'
																	});
																}
															});
														} else {
															layer.msg("注册失败...", {
																icon: 2
															});
														}
													},
													error: function() {
														layer.msg("错误");
													},
													done: function() {
														layer.close(loading);
													}
												});
												return false;
											});
										}
									}
								});
							});
						});
		</script>
	</body>

</html>